<template>
  <vab-query-form>
    <vab-query-form-top-panel v-if="config_table.search">
      <el-form inline label-width="49px" :model="queryForm" @submit.prevent>
        <!-- 状态 -->
        <el-form-item v-if="config_table.status_select == true" class="z-col" label="">
          <el-select v-model.trim="queryForm.search.status" clearable filterable :placeholder="'请选择状态'">
            <el-option v-for="(item, status_index) in config_table.status_list" :key="status_index" :label="item" :value="status_index" />
          </el-select>
        </el-form-item>

        <!-- 外键单选 -->
        <template v-for="col in config_table.cols">
          <template v-for="(foreign, f_index) in config_table.foreign_list">
            <el-form-item v-if="col.model == f_index && col.search == 'true'" class="z-col">
              <el-select
                v-model.trim="queryForm.search[col.field]"
                clearable
                filterable
                :placeholder="'请选择' + col.comment"
                @change="foreignChange($event, col.model, col.field)"
              >
                <el-option
                  v-for="(status_item, status_index) in config_table.foreign_list[col.model]"
                  :key="status_index"
                  :label="status_item.name"
                  :value="status_item.id"
                />
              </el-select>
            </el-form-item>
          </template>
        </template>
        <!-- 外键多选 -->
        <template v-for="col in config_table.cols">
          <template v-for="(selection, s_index) in config_table.selection_list">
            <el-form-item v-if="col.model == s_index && col.search == 'true'" class="z-col">
              <el-select v-model.trim="queryForm.search[col.field]" clearable filterable multiple :placeholder="'请选择' + col.comment">
                <el-option
                  v-for="(status_item, status_index) in selection_list[col.model]"
                  :key="status_index"
                  :label="status_item.name"
                  :value="status_item.name"
                />
              </el-select>
            </el-form-item>
          </template>
        </template>

        <template v-for="ds in config_table.date_search">
          <el-form-item class="z-col2" label="">
            <el-date-picker
              v-model="queryForm[ds.field]"
              :end-placeholder="ds.name + '结束日期'"
              range-separator="至"
              :start-placeholder="ds.name + '开始日期'"
              type="daterange"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </template>

        <el-form-item v-if="config_table.search != true" class="z-col">
          <el-input v-model="queryForm.key1" clearable :placeholder="'请输入一年级班级数量' + ''" style="width: 100%" />
        </el-form-item>
        <el-form-item v-if="config_table.search != true" class="z-col">
          <el-input v-model="queryForm.key2" clearable :placeholder="'请输入二年级班级数量' + ''" style="width: 100%" />
        </el-form-item>
        <el-form-item v-if="config_table.search != true" class="z-col">
          <el-input v-model="queryForm.key3" clearable :placeholder="'请输入三年级班级数量' + ''" style="width: 100%" />
        </el-form-item>
        <el-form-item v-if="config_table.search != true" class="z-col">
          <el-input v-model="queryForm.key4" clearable :placeholder="'请输入四年级班级数量' + ''" style="width: 100%" />
        </el-form-item>
        <el-form-item v-if="config_table.search != true" class="z-col">
          <el-input v-model="queryForm.key5" clearable :placeholder="'请输入五年级班级数量' + ''" style="width: 100%" />
        </el-form-item>
        <el-form-item v-if="config_table.search != true" class="z-col">
          <el-input v-model="queryForm.key6" clearable :placeholder="'请输入六年级班级数量' + ''" style="width: 100%" />
        </el-form-item>

        <!-- <el-form-item class="z-col_">
          <el-button :disabled="isLoading" :icon="Search" native-type="submit" type="primary" @click="selectData">查询</el-button>
        </el-form-item> -->
        <el-form-item v-if="config_table.export == '1'" class="z-col_">
          <el-button :icon="Expand" type="primary" @click="exportData">导出</el-button>
        </el-form-item>
      </el-form>
    </vab-query-form-top-panel>

    <vab-query-form-left-panel>
      <el-button v-if="!is_recycle && config_table._add == '1'" :icon="Plus" type="primary" @click="add">添加</el-button>
      <el-button v-if="!is_recycle && config_table._del == '1'" :icon="Delete" type="danger" @click="del">删除</el-button>

      <el-button v-if="!is_recycle && config_table.import == '1'" :icon="Plus" type="warning" @click="importTemplate">导入模板</el-button>

      <import-data
        v-if="!is_recycle && config_table.import == '1'"
        :tablename="config_table.tablename"
        :model="config_table.tablename"
        @get-data="getData"
      />

      <template v-for="(btn, btn_index) in btn_arr" :key="btn_index">
        <el-button v-if="!is_recycle && btn.name" :type="btn.type" @click="btnCallback(btn.method)">{{ btn.name }}</el-button>
      </template>
      <el-button v-if="is_recycle" :icon="Plus" type="primary" @click="recovery">恢复</el-button>
      <el-button v-if="is_recycle" :icon="Delete" type="danger" @click="com_del">彻底删除</el-button>
    </vab-query-form-left-panel>
    <vab-query-form-right-panel v-if="config_table._del == '1' && config_table.recycle == true">
      <div class="custom-table-right-tools">
        <el-button v-if="!is_recycle && config_table.login_log.accountid == '1'" type="info" @click="recycle">
          <vab-icon icon="recycle-fill" />
          <span>回收站</span>
        </el-button>
        <el-button v-else type="info" @click="getData">
          <vab-icon icon="arrow-left-double-fill" />
          <span>返回</span>
        </el-button>
      </div>
    </vab-query-form-right-panel>
  </vab-query-form>
</template>

<script lang="ts" setup>
import { Delete, Expand, Plus, Search } from '@element-plus/icons-vue'
defineOptions({
  name: 'ClassOpbar',
})
const props = defineProps({
  is_recycle: {
    type: Boolean,
    default: false,
  },
  config_table: {
    type: Object,
    default: {},
  },
  //按钮数组
  btn_arr: {
    type: Array,
    default: [{}], //name,method
  },
  exportMethod: {
    type: String,
    default: 'exportData', //name,method
  },
})

const emit = defineEmits(['fetch-data', 'add', 'del', 'recovery', 'com_del', 'recycle', 'getData', 'btnCallback', 'foreignChange'])
const isLoading = ref(false)
const queryForm = reactive<any>({
  page: 1,
  num: 20,
  sort: '',
  key: '',
  orderby: '',
  search: {},
})
//导出数据
const exportData = () => {
  if (queryForm.search) {
    //json转字符串
    queryForm.search = JSON.stringify(queryForm.search)
  }
  let date_search = ''
  for (let i = 0; i < props.config_table.date_search.length; i++) {
    if (queryForm[props.config_table.date_search[i].field]) {
      date_search += `&${props.config_table.date_search[i].field}=${queryForm[props.config_table.date_search[i].field]}`
    }
  }
  window.open(
    `${import.meta.env.VITE_APP_BASE_URL}${props.config_table.tablename}/${props.exportMethod}?key1=${queryForm.key1}&key2=${queryForm.key2}&key3=${queryForm.key3}&key4=${queryForm.key4}&key5=${queryForm.key5}&key6=${queryForm.key6}&sort=${queryForm.sort}&orderby=${
      queryForm.orderby
    }&search=${queryForm.search}${date_search}`,
    '_blank'
  )
  if (queryForm.search) {
    //字符串转json
    queryForm.search = JSON.parse(queryForm.search)
  }
}
//外键更换
const foreignChange = ($event: any, model: any, field: any) => {
  //调用主框架中的方法
  console.log(1)
  emit('foreignChange', $event, model, field)
}
const btnCallback = (method: any) => {
  //调用主框架中的方法
  emit('btnCallback', method)
}
//查看数据
const getData = () => {
  //调用主框架中的方法
  emit('getData')
}
//查看回收站
const recycle = () => {
  //调用主框架中的方法
  emit('recycle')
}
//进行添加
const add = () => {
  //调用主框架中的方法
  emit('add')
}
//进行批量删除
const del = () => {
  //调用主框架中的方法
  emit('del', false)
}
//进行批量恢复
const recovery = () => {
  //调用主框架中的方法
  emit('recovery', false)
}
//进行批量彻底删除
const com_del = () => {
  //调用主框架中的方法
  emit('com_del', false)
}
//获取导入模板
const importTemplate = () => {
  window.open(`${import.meta.env.VITE_APP_BASE_URL}/` + props.config_table.tablename + '/import_example', '_blank')
}
//进行搜索
const selectData = () => {
  isLoading.value = true
  if (queryForm.search) {
    //json转字符串
    queryForm.search = JSON.stringify(queryForm.search)
  }
  //调用主框架中的方法
  emit('fetch-data', queryForm)
  if (queryForm.search) {
    //字符串转json
    queryForm.search = JSON.parse(queryForm.search)
  }
  isLoading.value = false
}
</script>
<style scoped>
.z-col {
  width: 188px;
  padding: 5px;
}
.z-col_ {
  width: 88px;
  padding: 5px;
}

.z-col2 {
  width: 300px;
  padding: 5px;
}
</style>
